<script>
  import util from "@/util/util.js"
  
  export default {
    methods: {
      getUrl(path){
        return util.getStaticURL(path)
      }
    }
  }
</script>

<template>
  <view class="components-list tn-safe-area-inset-bottom">
    <tn-nav-bar fixed>列表</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-list-view title="消息列表" unlined="bottom">
        <!-- 单个的消息 -->
        <tn-list-cell :unlined="true">
          <view class="message">
            <!-- 头像 -->
            <view class="message_left">
              <tn-avatar :src="getUrl('/images/avatar/xiaomai1.jpg')"></tn-avatar>
            </view>
            <!-- 内容 -->
            <view class="message_mid">
              <view class="message_name">张大鹏</view>
              <view class="message_content tn-text-ellipsis">
                人生苦短，我用Python，坚持每天学习，坚持每天进步一点点
              </view>
            </view>
            <!-- 右侧属性 -->
            <view class="message_right">
              <view class="message_time">13:33</view>
              <view class="message_tips">
                <tn-tag 
                  backgroundColor="tn-bg-red"
                  fontColor="tn-color-white"
                  shape="circle"
                  width="auto"
                  size="sm"
                >99</tn-tag>
              </view>
            </view>
          </view>
        </tn-list-cell>
        <!-- 单个的消息 -->
        <tn-list-cell :unlined="true">
          <view class="message">
            <!-- 头像 -->
            <view class="message_left">
              <tn-avatar :src="getUrl('/images/avatar/xiaomai1.jpg')"></tn-avatar>
            </view>
            <!-- 内容 -->
            <view class="message_mid">
              <view class="message_name">张大鹏</view>
              <view class="message_content tn-text-ellipsis">
                人生苦短，我用Python，坚持每天学习，坚持每天进步一点点
              </view>
            </view>
            <!-- 右侧属性 -->
            <view class="message_right">
              <view class="message_time">13:33</view>
              <view class="message_tips">
                <text class="message_icon tn-icon-sound-close"></text>
              </view>
            </view>
          </view>
        </tn-list-cell>
      </tn-list-view>
    </view>
    <view class="tn-padding-bottom-lg"></view>
  </view>
</template>

<style lang="scss" scoped>
  .components-list {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  .message {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    
    .message_left {
      width: 10%;
    }
    .message_mid {
      width: 80%;
      padding-left: 20rpx;
      padding-right: 40rpx;
    }
    .message_right{
      width: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .message_name {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }
    .message_content {
      font-size: 26rpx;
      color: #838383;
    }
    .message_tips {
      .message_icon {
        font-size: 36rpx;
        color: #AAAAAA;
      }
    }
  }
</style>